<template>
	<div class="operationBox heightMax publicbox" v-loading='loading'>
		<el-row :gutter="10">
			<el-col :span="6">
				<div class="colItem">
					<span class="font14 searchCode" style="width: 200px;">设备注册代码：</span>
					<el-input size="mini" @keyup.enter.native="find" placeholder="请输入设备注册代码" clearable v-model="query"></el-input>
				</div>
			</el-col>
			<el-col :span="5">
				<div class="colItem">
					<span class="font14 searchCode">开始时间：</span>
					<el-date-picker v-model="timeStart" type="date" format='yyyy-MM-dd' value-format='yyyy-MM-dd' placeholder="选择开始日期"
					 size="mini">
					</el-date-picker>
				</div>
			</el-col>
			<el-col :span="5">
				<div class="colItem">
					<span class="font14 searchCode">结束时间：</span>
					<el-date-picker v-model="timeEnd" type="date" format='yyyy-MM-dd' value-format='yyyy-MM-dd' placeholder="选择结束日期"
					 size="mini" :disabled="disAbleTime" :picker-options="pickerOptions">
					</el-date-picker>
				</div>
			</el-col>
			<el-button type="primary" icon="el-icon-search" size="mizi" class='fl' @click='find'>搜索</el-button>
			<el-button icon="el-icon-delete" @click='reset' class='fl'>重置</el-button>
		</el-row>
		<el-row :gutter="10">
			<el-col :span="1.5">
				<el-button type="primary" size="mini" :disabled="btnCon" @click='complie' v-if="complieBtnShow">编辑</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button type="success" size="mini" :disabled="btnCon" @click='detail' v-if="readDataShow">详情</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button type="danger" size="mini" :disabled="btnCon" @click='remove(1)' v-if="deleteBtnShow">删除</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button type="danger" size="mini" :disabled="btnConMore" @click='remove(2)'  v-if="deleteBtnShow">批量删除</el-button>
			</el-col>
			<div class="fr">
				<el-button type="primary" @click='derive'>导出</el-button>
				<el-button type="success" @click='newAdd'>新建</el-button>
			</div>
		</el-row>
		<div class="tableBox">
			<vueScroll>
				<el-table :data="tableData" highlight-current-row ref="moviesTable" @row-click="rowClick" @select-all="selectChange"
				 @selection-change="selectChange" style="width: 100%" border header-row-class-name='tableHeader'>
					<el-table-column type="index" class="over" fixed>
					</el-table-column>
					<el-table-column type="selection" min-width="50" fixed>
					</el-table-column>
					<el-table-column label="配件号" max-width="140">
						<template slot-scope="scope">
							<el-tooltip class="item" effect="dark" :content="scope.row.number" placement="top">
								<span class="speSpan">{{scope.row.number}}</span>
							</el-tooltip>
						</template>
					</el-table-column>
					<el-table-column label="电梯注册号" max-width="140">
						<template slot-scope="scope">
							<el-tooltip class="item" effect="dark" :content="scope.row.register_code" placement="top">
								<span class="speSpan">{{scope.row.register_code}}</span>
							</el-tooltip>
						</template>
					</el-table-column>
					<el-table-column label="配件名称" max-width="140">
						<template slot-scope="scope">
							<el-tooltip class="item" effect="dark" :content="scope.row.name" placement="top">
								<span class="speSpan">{{scope.row.name}}</span>
							</el-tooltip>
						</template>
					</el-table-column>
					<el-table-column label="配件类型" max-width="120">
						<template slot-scope="scope">
							<el-tooltip class="item" effect="dark" :content="scope.row.atype" placement="top">
								<span class="speSpan">{{scope.row.atype}}</span>
							</el-tooltip>
						</template>
					</el-table-column>
					<el-table-column label="更换时间" max-width="140">
						<template slot-scope="scope">
							<el-tooltip class="item" effect="dark" :content="scope.row.replace_time" placement="top">
								<span class="speSpan">{{scope.row.replace_time}}</span>
							</el-tooltip>
						</template>
					</el-table-column>
					<el-table-column label="质保期限" max-width="140">
						<template slot-scope="scope">
							<el-tooltip class="item" effect="dark" :content="scope.row.warranty_time" placement="top">
								<span class="speSpan">{{scope.row.warranty_time}}</span>
							</el-tooltip>
						</template>
					</el-table-column>
					<el-table-column label="更换人" max-width="140">
						<template slot-scope="scope">
							<el-tooltip class="item" effect="dark" :content="scope.row.person_name" placement="top">
								<span class="speSpan">{{scope.row.person_name}}</span>
							</el-tooltip>
						</template>
					</el-table-column>
					<el-table-column label="电梯详情" max-width="140" v-if="readDataShow">
						<template slot-scope="scope">
							<span class="eleBlueColor cursor" @click="lookLiftDetail(scope.row.elevator)">查看</span>
						</template>
					</el-table-column>
				</el-table>
				<!-- 分页器 -->
				<div class="pag">
					<el-pagination :current-page="page" :page-sizes="[10, 20, 30, 40]" :page-size="page_size" layout="total, sizes, prev, pager, next, jumper"
					 :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange">
					</el-pagination>
				</div>
			</vueScroll>
		</div>
		<add v-if="addAndCompileShow" :addAndCompileShow='addAndCompileShow' :title="title" :currentId='currentId'
		 :currentType='currentType' @closeDialog='closeDialog' @success='successFn'></add>
		<liftDetail v-if='liftDetailShow' isAddOrComp='3' :addAndCompileShow='liftDetailShow'
		 @detailMaskShow='detailMaskShow' :rowId='eleId'></liftDetail>
	</div>
</template>

<script>
	import {
		loadFn,
		axiosPost,
		axiosGet,
		axiosDelete,
		axiosPut,
		axiosChange,
		moment
	} from "@/common.js";
	import add from './add.vue'
		import liftDetail from "@/components/ElevatorMaintenance/LiftManage/addAndCompile.vue"
	export default {
		components: {
			add,
			liftDetail
		},
		mounted() {
			this.getTableList()
			this.getPermition()
		},
		data() {
			return {
				liftDetailShow:false,
				eleId:0,
				tableData: [],
				page: 1,
				page_size: 10,
				total: 0,
				loading: false,
				timeStart: '',
				timeEnd: '',
				query: '',
				addAndCompileShow: false,
				title: '添加配件',
				currentType: 0,
				btnCon: true,
				btnConMore: true,
				currentId: 0,
				choseArr: [],
				readDataShow:false,
				complieBtnShow:false,
				deleteBtnShow:false,
				addBtnShow:false,
				pidsArr:[]
			}
		},
		computed: {
			disAbleTime() {
				if (this.timeStart) {
					return false
				} else {
					return true
				}
			},
			pickerOptions() {
				return {
					disabledDate: (time) => {
						return time.getTime() < moment(this.timeStart)
					}
				}
			},
			xiuArr() {
				if (localStorage.weiXiu) {
					let arr = JSON.parse(localStorage.weiXiu).list
					return arr.filter((item) => {
						return item.name == '配件管理'
					})
				} else {
					return []
				}
			}
		},
		methods: {
			getPermition() {
				if (this.xiuArr.length != 0) {
					if (this.xiuArr[0].pids) {
						this.pidsArr = this.xiuArr[0].pids
					}
				}
				if (this.pidsArr.length > 0) {
					this.pidsArr.map((item) => {
						if (item.desc == 'get') {
							this.readDataShow = true
						}
						if (item.desc == 'put') {
							this.complieBtnShow = true
						}
						if (item.desc == 'delete') {
							this.deleteBtnShow = true
						}
						if (item.desc == 'post') {
							this.addBtnShow = true
						}
					})
				}
			},
			lookLiftDetail(id){
				this.eleId = id
				this.liftDetailShow = true
			},
			detailMaskShow(){
				this.liftDetailShow = false
			},
			remove(val) {
				let id = ''
				let url = ''
				let data = ''
				if (val == 1) {
					id = this.choseArr[0].id
					url = '/basic/fittings/' + id + '/'
				} else {
					url = '/basic/fittings/'
					id = this.choseArr.map((item) => {
						return item.id
					})
					data = {
						ids: id
					}
				}
				this.$confirm('此操作将永久删除该配件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					axiosChange(url, 'delete', data, (res) => {
						if (res.code == 0) {
							this.$message.success('操作成功')
							this.getTableList()
						} else {
							this.$message.error(res.detail.result)
						}
					})
				}).catch(() => {

				});
			},
			//导出
			derive() {
				this.$confirm('此操作将导出全部配件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					axiosGet('/basic/fittings/download/', '', (res) => {
						window.open(res)
						this.$message.success('导出成功')
					})
				}).catch(() => {

				});
			},
			newAdd() {
				this.currentType = 0
				this.addAndCompileShow = true
			},
			complie() {
				this.currentType = 1
				this.title = '编辑配件'
				this.addAndCompileShow = true
			},
			detail() {
				this.currentType = 2
				this.title = '配件详情'
				this.addAndCompileShow = true
			},
			//获取表格数据
			getTableList() {
				this.loading = true
				let params = {
					page: this.page,
					page_size_count: this.page_size,
					key_words: this.query,
					time_from: this.timeStart ? this.timeStart : '',
					time_to: this.timeEnd ? this.timeEnd : '',
				}
				axiosGet('/basic/fittings/', params, (res) => {
					this.loading = false
					if (res.code == 0) {
						this.total = res.detail.count
						this.tableData = res.detail.results
					} else {
						this.$message.error(res.detail.result)
					}
				})
			},
			find() {
				this.page = 1
				this.page_size = 10
				this.getTableList()
			},
			reset() {
				this.page = 1
				this.page_size = 10
				this.query = ''
				this.timeStart = ''
				this.timeEnd = ''
				this.getTableList()
			},
			//表格
			rowClick(row, column, event) {
				this.$refs.moviesTable.toggleRowSelection(row)
			},
			selectChange(res) {
				this.choseArr = res
				if (res.length == 1) {
					this.btnCon = false
					this.btnConMore = true
					this.currentId = res[0].id
				} else {
					this.currentId = 0
					this.btnCon = true
					if (res.length == 0) {
						this.btnConMore = true
					} else {
						this.btnConMore = false
					}
				}
			},
			//分页器
			handleSizeChange(size) {
				this.page_size = size
				this.getTableList()
			},
			handleCurrentChange(page) {
				this.page = page
				this.getTableList()
			},
			closeDialog() {
				this.addAndCompileShow = false
			},
			successFn() {
				this.addAndCompileShow = false
				this.getTableList()
			}
		},
	}
</script>

<style scoped lang="less">
	.colItem {
		display: flex;
		flex-direction: row;

		.searchCode {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			width: 120px;
		}
	}

	.tableBox {
		height: 80%;
		overflow-y: auto;
	}

	.listName {
		display: flex;
		justify-content: flex-start;
		text-align: left;
		height: 25px;
		align-items: center;

		i {
			width: 3px;
			height: 60%;
			background: #2d8cf0;
			margin: 10px 5px;
		}

	}
</style>
